import React, {Component} from 'react';
import {Form, Input, Select} from 'antd';
import PropTypes from 'prop-types';

const { Option } = Select;

// 增加表单
export class CategoryAddForm extends Component {
  formRef = React.createRef();

  static propTypes = {
    tabs: PropTypes.array.isRequired,
    getFormVal: PropTypes.func,
  }
  // 创建默认的表单实例
  componentDidMount() {
    this.props.getFormVal(this.formRef);
  }

  render() {
    const {tabs} = this.props;
    return (
      <Form
        name="basic"
        ref={this.formRef}
        labelCol={{span: 4,}}
        initialValues={{category:tabs[0]}}
      >
        <Form.Item
          label="类别"
          name="category"
          rules={[
            {
              required: true,
              message: '请输入类别',
            },
          ]}
        >
          <Select>
            {
              tabs.map(i => {
                return (
                  <Option value={i} key={i}>{i}</Option>
                )
              })
            }
          </Select>
        </Form.Item>

        <Form.Item
          label="标签名"
          name="tag"
          rules={[
            {
              required: true,
              message: '请输入标签名',
            },
          ]}
        >
          <Input/>
        </Form.Item>
      </Form>
    )
  }
}

// 修改
export class UpdateForm extends Component {
  formRef = React.createRef();

  static propTypes = {
    value: PropTypes.object.isRequired,
    getFormVal: PropTypes.func,
  }

  // 创建默认的表单实例
  componentDidMount() {
    this.props.getFormVal(this.formRef);
  }

  render() {
    const {value} = this.props;
    return (
      // initialValues存在无法更新的情况
      <Form
        name="basic"
        ref={this.formRef}
        initialValues={{tag: value.name}}
        labelCol={{span: 4,}}
      >
        <Form.Item
          label="标签名"
          name="tag"
          rules={[
            {
              required: true,
              message: '请输入标签名',
            },
          ]}
        >
          <Input/>
        </Form.Item>
      </Form>
    )
  }
}

